<template>
  <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
  <ScaleScreen
    :width="1920"
    :height="1080"
    class="scale-wrap"
    :selfAdaption="$store.state.setting.isScale"
  >
      <div :class="{
        'bg': true,
        'bgImg2': Boolean($route.name === 'revolutionaryMemorial'),
      }">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
<!--        <div class="title_wrap"></div>-->
        <!-- 头部 s -->
        <div class="d-flex jc-center title_wrap">
<!--          <div class="zuojuxing"></div>-->
<!--          <div class="youjuxing"></div>-->
<!--          <div class="guang"></div>-->
          <div class="d-flex jc-center">
            <div class="title">
<!--              <span class="title-text" @click="jumpPage(0)">{{ title }}</span>-->
              <span class="title-text">{{ title }}</span>
            </div>
            <div class="title2">
              <span class="title-text">{{ title2 }}</span>
            </div>
          </div>
<!--          <div class="time-background"></div>-->
<!--          <div class="timers" v-if="!($route.name === 'revolutionaryMemorial')">-->
<!--              <span class="timers-text">-->
<!--                  <span class="mr">{{ dateYear }}</span>-->
<!--                  <span class="mr">{{ dateDay }}</span>-->
<!--                  <span>{{ dateWeek }}</span>-->
<!--              </span>-->
<!--          </div>-->
        </div>
        <!-- 头部 e-->
        <!-- 内容  s-->
        <router-view></router-view>
        <!-- 内容 e -->
        <!-- 半月导航  s-->
<!--            <div class="sector-menu2">-->
<!--                <div :class="['middle', { 'selected': currentPage == 0 }]" @click="jumpPage(0)"></div>-->
<!--                <div-->
<!--                  :class="['urban-area', { 'selected': currentPage == 1 }]"-->
<!--                  @click="jumpPage(1)"-->
<!--                  v-if="currentPage > 0"-->
<!--                >-->
<!--                    <span class="text">-->
<!--                        <vue-arc-text ref="arctext" :text="arcTextForm.text" :arc="arcTextForm.arc" :direction="arcTextForm.direction"></vue-arc-text>-->
<!--                    </span>-->
<!--                </div>-->
<!--                <div-->
<!--                  :class="['revolutionary-memorial', { 'selected': currentPage == 2 }]"-->
<!--                  @click="jumpPage(2)"-->
<!--                  v-if="currentPage > 1"-->
<!--                >-->
<!--                    <span class="text">-->
<!--                        <vue-arc-text ref="arctext" :text="arcTextForm2.text" :arc="arcTextForm2.arc" :direction="arcTextForm2.direction"></vue-arc-text>-->
<!--                    </span>-->
<!--                </div>-->
<!--            </div>-->

          <div class="sector-menu3">
              <div :class="['middle']" @click="jumpPage(0)" v-if="currentPage > 0">全省博物馆客流数据</div>
              <div
                :class="['urban-area']"
                @click="jumpPage(1)"
                v-if="currentPage > 1"
              >
                  {{ urbanAreaName }}辖区博物馆客流数据
              </div>
          </div>
        <!-- 半月导航 e -->
      </div>
    </div>
    <Setting ref="setting" />
  </ScaleScreen>
  <!-- </div> -->
</template>

<script>
import { formatTime } from "../utils/index.js";
import Setting from "./setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import {mapState, mapMutations} from 'vuex';
import VueArcText from 'vue-arc-text'
import {Message} from 'element-ui';

export default {
  components: { Setting, ScaleScreen, VueArcText  },
  data() {
    return {
      title: "全省博物馆客流数据",
      title2: "",
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      arcTextForm: {
          text: '地市级', // 弯曲文字的内容
          arc: 50, // 弯曲的角度
          direction: 1 // 弯曲文字的方向 （向上 或 向下）
      },
      arcTextForm2: {
          text: '文博场馆', // 弯曲文字的内容
          arc: 80, // 弯曲的角度
          direction: 1 // 弯曲文字的方向 （向上 或 向下）
      },
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  watch: {
      $route() {
          this.routeChange();
      },
      museumName: {
          handler(newVal, oldVal) {
              this.title = this.museumName + "客流数据";
          },
          deep: true,
      },
      urbanAreaName: {
          handler(newVal, oldVal) {
              this.arcTextForm.text = this.urbanAreaName;
          },
          deep: true,
      },

  },
  computed: {
      ...mapState('museumInformation', [
          'museumName',
          'currentPage',
          'urbanAreaName',
          'urbancityId',
      ])
  },
  created() {
      this.routeChange();
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();

    // 初始化半月导航
      console.log(this.$route, "this.$route");

  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    //路由变化时执行的函数
    routeChange() {
        if (this.$route.name === "museums") {
            this.title = "全省博物馆客流数据";
            // this.title2 = "";
            this.$store.commit('museumInformation/SET_CurrentPage', 0);
        }else if (this.$route.name === "urbanArea") {
            console.log(this.$route.query.name, "this.$route");
            this.title = this.$route.query.name + "辖区博物馆客流数据";
            this.arcTextForm.text = this.$route.query.name;
            this.$store.commit('museumInformation/SET_CurrentPage', 1);
        } else if (this.$route.name === "revolutionaryMemorial") {
            // this.title = "全省博物馆客流数据";
            // this.title = this.museumName;
            // this.title = this.$route.query.name + "客流数据";
            this.title = this.museumName + "客流数据";
            this.arcTextForm2.text = this.$route.query.name;
            this.$store.commit('museumInformation/SET_CurrentPage', 2);
        }
    },
    showSetting() {
      this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy年MM月dd日");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
    // 导航跳转页面
      jumpPage(index){
        if (index === 0) {
            this.$store.commit('museumInformation/SET_CurrentPage', index);
            this.$store.commit('museumInformation/SET_UrbanAreaName', undefined);
            this.$store.commit('museumInformation/SET_UrbanCityId', undefined);
            this.$router.push({
                path: '/museums',
                // query: {
                //     name: params.name,
                // }
            })
        }else if (index === 1) {
            if (this.urbancityId){
                this.$router.push({
                    path: '/urbanArea',
                    query: {
                        // id: item.id,
                        name: this.urbanAreaName,
                        cityId:   this.urbancityId,
                    }
                });
            }else {
                Message({
                    duration: 2000,
                    showClose: true,
                    message: '请从地图选择',
                    type: 'warning'
                });
            }
        }else if (index === 2) {
            // Message({
            //     message: '请从列表中选择',
            //     type: 'warning'
            // });
        }
      }
  },
};
</script>

<style lang="scss">
@import "./home.scss";
</style>
